<template>
  <div class="wanted">
    <header>
      <p>
        <router-link to="/">《——</router-link>
      </p>
      <p>求租</p>
      <p>
        <span>...</span>
        <span>o</span>
      </p>
    </header>
    <main>
      <div class="screening">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" @change="getwantedList" />
          <van-dropdown-item v-model="value2" :options="option2" @change="getwantedList" />
        </van-dropdown-menu>
      </div>

      <div class="wantedlist">
        <div class="listdata" v-for="(item, index) in hotRoom" :key="index">
          <h2>{{item.name}}</h2>
          <h3>上海市 {{item.address}} 海湾镇五四公路3389</h3>
          <p>
            <span>
              意向区域:
              {{item.address}}
            </span>
            <span>
              房源类型:
              {{item.type2}}
            </span>
            <span>
              <i class="el-icon-chat-dot-round"></i>
              <i class="el-icon-phone"></i>
            </span>
          </p>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import { hotRoom } from "@/api/index";
import { create } from "domain";
export default {
  data() {
    return {
      hotRoom: [],

      value1: "",
      option1: [
        { text: "房产类型", value: "" },
        { text: "高层", value: "高层" },
        { text: "车库", value: "车库" },
        { text: "四合院", value: "四合院" }
      ],
      value2: "",
      option2: [
        { text: "区域选择", value: "" },
        { text: "奉贤区", value: "奉贤区" },
        { text: "金山区", value: "金山区" },
        { text: "浦东新区", value: "浦东新区" },
        { text: "虹口区", value: "虹口区" }
      ]
    };
  },
  created() {
    this.getwantedList();
  },
  methods: {
    //数据    筛选
    getwantedList(value) {
      axios({
        url: "/api/screening2",
        method: "post",
        data: {
          type2: this.value1,
          address: this.value2
        }
      }).then(res => {
        if (res.data.code === 1) {
          //调用函数
          this.hotRoom = res.data.data;
        } else if (res.data.code === 0) {
          this.$router.push("/login");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.wanted {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
    background-color: rgb(34, 100, 177);
    color: #fff;

    p:first-child {
      a {
        color: #fff;
      }
    }
    p:nth-child(3) {
      border: 1px solid rgb(226, 226, 226);
      width: 60px;
      height: 26px;
      border-radius: 26px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }

  main {
    flex: 1;
    overflow-y: scroll;
    .wantedlist {
      width: 100%;
      height: 100%;
      .listdata {
        margin-top: 25px;
        border: 1px solid rgb(123, 247, 247);
        border-radius: 20px;
        width: 100%;
        height: 100px;
        h2 {
          font-size: 25px;
          font-weight: bold;
          // border-bottom: 1px solid rgb(209, 151, 151);
        }
        h3 {
          border-bottom: 1px solid rgb(146, 136, 136);
        }
        p {
          padding-top: 4px;
          display: flex;
          justify-content: space-between;
          span {
            font-size: 16px;
            font-weight: bold;
            padding-right: 10px;
            i {
              padding-right: 10px;
              color: rgb(233, 98, 98);
            }
            button {
              border-radius: 10px;
              // background-color: rgb(235, 156, 81);
            }
          }
        }
      }
    }
  }
}
</style>